$(function () {
    $.get('http://localhost:8000/product', data => {
        render(data)
    })
})

// 查找
function find() {
    // 拿到关键字
    let keyword = $('#keyword').val()
    // 判断keyword是否存在
    if (keyword) {   //向后端发送请求，获得列表数据
        $.get('http://localhost:8000/product', data => {
            Query()
            render(data)
        })
    } else {
        $.get('http://localhost:8000/product', data => {
            Query()
            render(data)
        })
    }
}

// 删除
function del(id) {
    // console.log(id);
    // $.ajax({
    //     type:'delete',
    //     url:`http://localhost:8000/product/${id}`,
    //     success:data=>{ render(data) }
    // })

    // 老胡
    let confirmDel = confirm(`确定删除id${id}的数据吗`)
    if (confirmDel) {
        delProduct(id).then(data => {

            let id = data.data.id
            console.log(data);
            // 找到对应id的哪一行，移除掉
            $(`[key=${id}]`).remove()
        })
    }

}

// 新增按钮
function add() {
    location.href = './addEdit.html'
    postProduct(obj).then(data => {

    })
}

// 显示页面数据
function render(arr) {
    // 使用juery获得所有数据区域的行元素
    let row = $('.rowData');
    let tb = $('#tbData');
    // 干掉
    row.remove()
    // 遍历筛选的数据，将数据插入到原表格中
    arr.forEach(item => {
        let html = `
        <tr class="rowData" key="${item.id}">
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.price}</td>
            <td>${item.stock}</td>
            <td>${item.supplier}</td>
            <td>
                <input type="button" value="编辑" onclick="update(${item.id})">
                <input type="button" value="删除" onclick="del(${item.id})">
            </td>
        </tr>
       `
        tb.append(html)
    });
}


// 编辑
function update(id) {
    location.href = `./addEdit.html?id=${id}`
    
}

// 根据关键字，再获得列表数据中过滤符合条件的数据，获得过滤后数据
function Query() {
    let keyword = $('#keyword').val()
    getProductList(keyword).then(data => {
        if (keyword) {
            let arr = data.filter(item => {
                return item.id == keyword || item.name == keyword || item.price == keyword || item.stock == keyword
            })
            render(arr)
        } else {
            render(data)
        }
    })
}

// function getJsonResult(keyword){
//     return new Promise(function(res,rej){
//         $.get('http://localhost:8000/product?keyword'+keyword,data=>{
//             res(data)
//         })
//     })
// }   